<template>
  <el-row>
    <el-col :span="24">
      <CreateStoreModal @refresh="refresh" :item="item" :visible.sync="showCreateModal"></CreateStoreModal>
      <BasicTable
        title="体验门店管理"
        ref="BasicTable"
        url="/ms-warehouse-store/shop/get-mallShopInfo-list"
        @selection-change="setRows"
        :columns="columns">

        <template slot="buttons">
          <el-button type="primary" @click.prevent="create">新增门店</el-button>
        </template>

        <template slot="preColumn">
          <el-table-column prop="orderNo" fixed="left" width="200px" align="center" label="体验门店logo">
            <template slot-scope="scope">
              <upload-image :value="getImageArr(scope.row)" readonly></upload-image>
            </template>
          </el-table-column>
        </template>

        <template slot="column">
          <el-table-column fixed="right" align="center" width="120px" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="edit(scope.row)"
              >
                修改
              </el-button>

              <el-button
                size="mini"
                type="text"
                @click.prevent="closeOrOpen(scope.row)"
              >
                <span v-if="scope.row.shopState == 1">关闭</span>
                <span v-if="scope.row.shopState == 0">开启</span>
              </el-button>
            </template>
          </el-table-column>
        </template>
      </BasicTable>
    </el-col>
  </el-row>
</template>
<script>
import {decimalNumFilter, unixTimestampFilter, filterDataBaseDictionary} from '@/filters'
import CreateStoreModal from '@/views/oms/shop/CreateStoreModal'
import {copy, confirm, alert} from '@/utils'
export default {
  name: 'shopStore',
  filters: {
    decimalNumFilter,
    filterDataBaseDictionary
  },
  components: {
    CreateStoreModal
  },
  data() {
    return {
      searchLoading: false,
      search: {
        orderNo: '',
        outNo: '',
        storageTypeCode: '',
        cargoOwner: '',
        consigneName: '',
        consignePhone: '',
        founderUserName: '',
        foundStartDate: '',
        foundEndDate: '',
        businessNo: '',
        serviceNo: '',
        storageType: '',
        isStorage: '',
        outSourceWarehouse: '',
        addressArr: []
      },
      showCreateModal: false,
      isOpen: false,
      columns: [
        {
          label: '体验门店名称',
          data: 'shopName'
        },
        {
          label: '体验门店电话',
          data: 'shopPhone'
        },
        {
          label: '体验门店地址',
          data: 'province+city+district+address',
          render: (data, full) => {
            return `${full.province} ${full.city} ${full.district} ${full.address}`
          }
        },
        {
          label: '体验门店状态',
          data: 'shopState',
          render: (data, full) => {
            switch (parseInt(data)) {
              case 0:
                return '关闭'
              case 1:
                return '开启'
              default:
                return '未知'
            }
          }
        },
        {
          label: '创建时间',
          data: 'foundtime',
          render(data, full) {
            return unixTimestampFilter(data)
          }
        }
      ],
      item: {}
    }
  },
  methods: {
    searchFunc(search) {
      const basicTable = this.$refs.BasicTable
      if (basicTable) {
        let params = copy(search)
        delete params.addressArr
        this.searchLoading = true
        basicTable.search(params).finally(_ => {
          this.searchLoading = false
        })
      }
    },
    // 重置表单
    resetFields() {
      const searchForm = this.$refs.searchForm
      if (searchForm) {
        searchForm.resetFields()
      }
    },
    // 表格刷新
    refresh() {
      this.searchFunc(this.search)
    },
    // 选中的值
    setRows(rows) {
      this.rows = rows
    },
    show(data) {
      console.log('show', data)
    },
    // 修改
    edit(data) {
      this.item = data
      this.showCreateModal = true
    },
    // 新增
    create() {
      this.item = {}
      this.showCreateModal = true
    },
    closeOrOpen(row) {
      const shopState = parseInt(row.shopState)
      if ([0, 1].indexOf(shopState) >= 0) {
        let data = {id: row.id}
        data.shopState = shopState === 1 ? 0 : 1
        confirm(data.shopState ? '是否开启门店' : '是否关闭门店', '提示', {
          confirmButtonLoading: true,
          dangerouslyUseHTMLString: true,
          showCancelButton: true,
          confirmCallBack: ({confirmButtonLoadingClose, close}) => {
            this.$ajax.post('/ms-warehouse-store/shop/update-mallShopInfo', data).then(response => {
              if (response.success) {
                close().then(_ => {
                  confirm('操作成功')
                })
                this.refresh()
              }
              confirmButtonLoadingClose()
            }).catch(_ => {
              confirmButtonLoadingClose()
            })
          }
        })
      } else {
        alert('当前门店状态不正常')
      }
    },
    // 获取图片数组
    getImageArr(row) {
      const shopLogo = row.shopLogo
      if (shopLogo && typeof shopLogo === 'string') {
        return shopLogo.split(',')
      }
      return []
    }
  }
}
</script>
